<template>
    <div class="custom-tree-container">
        <div class="tree-top-operation" :inline="true">
            <el-button type="primary" size="small" icon="el-icon-circle-plus-outline" @click="appendTop">添加顶级节点
            </el-button>
            <el-button type="primary" size="small" icon="el-icon-search" @click="NodeSerch" style="float: right;">查询节点
            </el-button>
            <el-input type="text" v-model='serchParent' placeholder="输入查询的菜单名称..."
                      style="width: 200px;float: right;"></el-input>
        </div>
        <!-- 树菜单 -->
        <div class="block" ref="tree" style="margin-top: 20px;overflow-y: auto;">
            <el-tree :data="dataList" node-key="id" :props="defaultProps" accordion>
                 <span class="custom-tree-node" slot-scope="{ node, data }">
                    <span :class="!data.edit ? 'tree-name-color' : ''" style="font-size: 15px;font-weight: bold;">{{ node.label }}</span>
                    <span>
                      <el-button circle icon="el-icon-plus" size="mini" type="success"
                                 @click="append(node,data)"></el-button>
                      <el-button circle icon="el-icon-edit" size="mini" type="primary"
                                 @click="edit(node, data)"></el-button>
                      <el-button circle icon="el-icon-delete" size="mini" type="warning"
                                 @click="remove(node, data)"></el-button>
                    </span>
                  </span>
            </el-tree>
        </div>

        <!-- 详情框 -->
        <el-dialog :title="dialogTitle" :visible.sync="isDialog" :close-on-click-modal="false" width="700px">
            <el-form label-position="right" label-width="100px" :model="dialogData">
                <el-form-item label="父级ID">
                    <el-input v-model="dialogData.parentId" disabled></el-input>
                </el-form-item>
                <el-form-item label="资源名称">
                    <el-input v-model="dialogData.name"></el-input>
                </el-form-item>
                <el-form-item label="资源URL">
                    <el-input v-model="dialogData.url"></el-input>
                </el-form-item>
                <el-form-item label="资源路径">
                    <el-input v-model="dialogData.path"></el-input>
                </el-form-item>
                <el-form-item label="资源图标">
                    <el-input v-model="dialogData.iconCls"></el-input>
                </el-form-item>
                <el-form-item label="资源类型">
                    <el-select v-model="dialogData.srcType">
                        <el-option label="菜单" value="1"></el-option>
                        <el-option label="资源" value="2"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitDialog">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        data() {
            let _token = sessionStorage.getItem("tokenId");
            return {
                dataList: [],
                isDialog: false,
                dialogTitle: '',
                dialogData: {
                    id: '',
                    parentId: "",
                    name: "",
                    url: "",
                    path: "",
                    srcType: "",
                    iconCls: ""
                },
                serchParent: '',
                tokenId: _token,
                defaultProps: {
                    children: 'children',
                    label: 'name',
                    id: 'id'
                }
            };
        },
        created() {
            this.getData();
        },

        mounted(){
            this.$refs.tree.style.height = (document.documentElement.clientHeight - 160) + 'px';
        },
        methods: {
            getData() {
                let _this = this;
                this.$http({
                    url: '/api/adscm/system/menu/getAllMenu',
                    method: 'post',
                    headers: {'X-Requested-With': 'XMLHttpRequest'},
                    params: {
                        tokenId: _this.tokenId
                    }
                }).then(function (res) {
                    if (res.data.statusCode == 200) {
                        _this.dataList = res.data.content.children;
                    } else {
                        _this.$message.error(res.data.desc);
                    }
                }).catch(function (catchres) {
                    _this.$message.error("加载失败！请重新加载...");
                    _this.$router.push({path: '/'});
                })
            },
            appendTop() {
                this.isDialog = true;
                this.dialogTitle = '添加';
                this.dialogData = {
                    id: '',
                    parentId: 0,
                    name: '',
                    url: '',
                    path: '',
                    srcType: '',
                    iconCls: ''
                };
            },
            append(node, data) {
                this.isDialog = true;
                this.dialogTitle = '添加';
                this.dialogData = {
                    id: '',
                    parentId: data.id,
                    name: '',
                    url: '',
                    path: '',
                    srcType: '',
                    iconCls: ''
                };
            },
            edit(node, data) {
                this.isDialog = true;
                this.dialogTitle = '编辑';
                this.dialogData = {
                    id: data.id,
                    parentId: data.parentId,
                    name: data.name,
                    url: data.url,
                    path: data.path,
                    srcType: data.srcType.toString(),
                    iconCls: data.iconCls
                };
            },
            remove(node, data) {
                let _this = this;
                this.$confirm('确认删除吗?', '提示', {
                    confirmButtonClass: 'el-button--warning'
                }).then(() => {
                    _this.dialogTitle = '删除';
                    _this.dialogData.id = data.id;
                    _this.submitDialog();
                }).catch(() => {
                });
            },
            submitDialog() {
                let _this = this;
                let url;
                if (_this.dialogTitle === '添加') {
                    url = '/api/adscm/system/menu/addMenu?tokenId=' + _this.tokenId;
                } else if (_this.dialogTitle === '编辑') {
                    url = '/api/adscm/system/menu/editMenu?tokenId=' + _this.tokenId;
                } else if (_this.dialogTitle === '删除') {
                    url = '/api/adscm/system/menu/delMenu/' + _this.dialogData.id + '?tokenId=' + _this.tokenId;
                }
                this.$http({
                    url: url,
                    method: 'post',
                    headers: {'X-Requested-With': 'XMLHttpRequest'},
                    params: _this.dialogData
                }).then(function (res) {
                    if (res.data.statusCode == 200) {
                        _this.isDialog = false;
                        _this.getData();
                        _this.$message.success(res.data.desc);
                    } else {
                        _this.$message.error(res.data.desc);
                    }
                }).catch(function (catchres) {
                    _this.$message.error("修改失败！请重新修改...");
                })
            },
            NodeSerch() {
                let _this = this;
                if (_this.serchParent === '') {
                    _this.getData();
                } else {
                    this.$http({
                        url: '/api/adscm/system/menu/getMenuByName',
                        method: 'post',
                        headers: {'X-Requested-With': 'XMLHttpRequest'},
                        params: {
                            menuName: _this.serchParent,
                            tokenId: _this.tokenId,
                        }
                    }).then(function (res) {
                        if (res.data.statusCode == 200) {
                            _this.dataList = res.data.content;
                            _this.$message.success(res.data.desc);
                        } else {
                            _this.$message.error(res.data.desc);
                        }
                    }).catch(function (catchres) {
                        _this.$message.error("搜索失败！请重新搜索...");
                    })
                }
            }
        }
    };

</script>

<style scoped>
    @import "inedx.css";
</style>